<template>
  <a-button v-if="isCheck" type="danger" :disabled="renderOptions.disabled" ghost icon="minus" class="theme--perfect-button" @click="handleClick">{{defaultProps.title || '批量删除'}}</a-button>
</template>

<script>
export default {
  name: 'VxeToolbarBatchDel',
  props: {
    renderOptions: Object,
    params: Object,
    toolbarProps: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      defaultProps: {
        title: '批量删除'
      },
      isCheck: false,
      unwatch: ''
    }
  },
  // computed: {
  //   isCheck() {
  //     const { $grid } = this.params
  //     const checkbox = $grid.getCheckboxRecords(true)
  //     console.log('checkbox', checkbox)
  //     return checkbox && checkbox.length > 0
  //   }
  // },
  methods: {
    handleClick() {
      const { events = {}} = this.renderOptions
      const { button, $grid } = this.params
      events.click(button, $grid)
    }
  },
  mounted() {
    this.defaultProps = Object.assign({}, this.defaultProps, this.toolbarProps)
    this.unwatch = this.$watch(
      function() {
        // 处理函数都会被调用。
        // 这就像监听一个未被定义的计算属性
        const { $grid } = this.params
        const checkbox = $grid.getCheckboxRecords(true) || []
        return checkbox
      },
      function(newVal, oldVal) {
        // 将监听放在这里，计算属性中监听有bug
        this.isCheck = newVal.length > 0
      }
    )
  },
  beforeDestroy() {
    this.unwatch()
  }
}
</script>
<style>
.z-vxe-toolbar .vxe-button--item{
  margin-left: 0px !important;
}
</style>

